<script setup lang="jsx">
import { computed, ref, watch } from 'vue';
import { useBoolean } from '@sa/hooks';
import { $t } from '@/locales';
import { useTable } from '@/hooks/common/table';
import { fetchShopSeach } from '@/service/api';
import ConfirmModal from './confirm-modal.vue';
import KeywordChangePriceModal from './keyword-change-price-modal.vue';
const visible = defineModel('visible', { default: false });
const { bool: confirmVisible, setTrue: openConfirmModal } = useBoolean();
const { bool: keywordChangePriceVisible, setTrue: openkeywordChangePriceVisibleModal } = useBoolean();
const model = ref(createDefaultModel());
function createDefaultModel() {
  return {
    participatingStores: [],
    times: ''
  };
}
const storeOptions = [
  {
    value: 'guide',
    label: 'Guide',
    children: [
      {
        value: 'disciplines',
        label: 'Disciplines',
        children: [
          {
            value: 'consistency',
            label: 'Consistency'
          },
          {
            value: 'feedback',
            label: 'Feedback'
          },
          {
            value: 'efficiency',
            label: 'Efficiency'
          },
          {
            value: 'controllability',
            label: 'Controllability'
          }
        ]
      },
      {
        value: 'navigation',
        label: 'Navigation',
        children: [
          {
            value: 'side nav',
            label: 'Side Navigation'
          },
          {
            value: 'top nav',
            label: 'Top Navigation'
          }
        ]
      }
    ]
  },
  {
    value: 'component',
    label: 'Component',
    children: [
      {
        value: 'basic',
        label: 'Basic',
        children: [
          {
            value: 'layout',
            label: 'Layout'
          },
          {
            value: 'color',
            label: 'Color'
          },
          {
            value: 'typography',
            label: 'Typography'
          },
          {
            value: 'icon',
            label: 'Icon'
          },
          {
            value: 'button',
            label: 'Button'
          }
        ]
      },
      {
        value: 'form',
        label: 'Form',
        children: [
          {
            value: 'radio',
            label: 'Radio'
          },
          {
            value: 'checkbox',
            label: 'Checkbox'
          },
          {
            value: 'input',
            label: 'Input'
          },
          {
            value: 'input-number',
            label: 'InputNumber'
          },
          {
            value: 'select',
            label: 'Select'
          },
          {
            value: 'cascader',
            label: 'Cascader'
          },
          {
            value: 'switch',
            label: 'Switch'
          },
          {
            value: 'slider',
            label: 'Slider'
          },
          {
            value: 'time-picker',
            label: 'TimePicker'
          },
          {
            value: 'date-picker',
            label: 'DatePicker'
          },
          {
            value: 'datetime-picker',
            label: 'DateTimePicker'
          },
          {
            value: 'upload',
            label: 'Upload'
          },
          {
            value: 'rate',
            label: 'Rate'
          },
          {
            value: 'form',
            label: 'Form'
          }
        ]
      },
      {
        value: 'data',
        label: 'Data',
        children: [
          {
            value: 'table',
            label: 'Table'
          },
          {
            value: 'tag',
            label: 'Tag'
          },
          {
            value: 'progress',
            label: 'Progress'
          },
          {
            value: 'tree',
            label: 'Tree'
          },
          {
            value: 'pagination',
            label: 'Pagination'
          },
          {
            value: 'badge',
            label: 'Badge'
          }
        ]
      },
      {
        value: 'notice',
        label: 'Notice',
        children: [
          {
            value: 'alert',
            label: 'Alert'
          },
          {
            value: 'loading',
            label: 'Loading'
          },
          {
            value: 'message',
            label: 'Message'
          },
          {
            value: 'message-box',
            label: 'MessageBox'
          },
          {
            value: 'notification',
            label: 'Notification'
          }
        ]
      },
      {
        value: 'navigation',
        label: 'Navigation',
        children: [
          {
            value: 'menu',
            label: 'Menu'
          },
          {
            value: 'tabs',
            label: 'Tabs'
          },
          {
            value: 'breadcrumb',
            label: 'Breadcrumb'
          },
          {
            value: 'dropdown',
            label: 'Dropdown'
          },
          {
            value: 'steps',
            label: 'Steps'
          }
        ]
      },
      {
        value: 'others',
        label: 'Others',
        children: [
          {
            value: 'dialog',
            label: 'Dialog'
          },
          {
            value: 'tooltip',
            label: 'Tooltip'
          },
          {
            value: 'popover',
            label: 'Popover'
          },
          {
            value: 'card',
            label: 'Card'
          },
          {
            value: 'carousel',
            label: 'Carousel'
          },
          {
            value: 'collapse',
            label: 'Collapse'
          }
        ]
      }
    ]
  },
  {
    value: 'resource',
    label: 'Resource',
    children: [
      {
        value: 'axure',
        label: 'Axure Components'
      },
      {
        value: 'sketch',
        label: 'Sketch Templates'
      },
      {
        value: 'docs',
        label: 'Design Documentation'
      }
    ]
  }
];
const fileList = ref([]);

const { columns, data, loading, getData, getDataByPage, mobilePagination, searchParams, resetSearchParams } = useTable({
  apiFn: fetchShopSeach,
  apiParams: {
    PageIndex: 1,
    PageSize: 5,
    taskNumber: undefined,
    participatingStores: []
  },
  columns: () => [
    { type: 'selection', width: 48 },
    { prop: 'ShopId', label: $t('page.operations.keywords') },
    { prop: 'Name', label: $t('page.operations.avgBid') },
    { prop: 'promotionTime', label: $t('page.operations.showPrice') },
    { prop: 'promotionDetail', label: $t('page.operations.showCount') },
    { prop: 'promotionDetail', label: $t('page.operations.clickCount') },
    { prop: 'promotionDetail', label: $t('page.operations.orderCount') },
    { prop: 'promotionDetail', label: $t('page.operations.inputCost') },
    { prop: 'promotionDetail', label: $t('page.operations.gmv') },
    { prop: 'promotionDetail', label: $t('page.operations.grossProfit') },
    { prop: 'promotionDetail', label: $t('page.operations.conversionRate') },
    {
      prop: 'operate',
      label: $t('common.operate'),
      width: 130,
      formatter: row => (
        <div class="flex-center">
          <ElButton type="primary" plain size="small" onClick={() => handleBatchChangePrice(row.id)}>
            {$t('common.batchChangePrice')}
          </ElButton>
        </div>
      )
    }
  ]
});

function handleBatchImport() {}
function handleLoadingData() {}
function handleDeleteKeywords() {
  openConfirmModal();
}
function handleBatchChangePrice() {
  openkeywordChangePriceVisibleModal();
}
</script>

<template>
  <ElDrawer v-model="visible" size="85%" :with-header="false">
    <ElCard class="card-wrapper">
      <ElForm label-position="right" :label-width="80">
        <ElRow :gutter="24">
          <ElCol :lg="6" :md="8" :sm="12">
            <ElFormItem :label="$t('page.operations.participatingStores')" prop="participatingStores">
              <ElCascader v-model="model.participatingStores" :options="storeOptions" class="flex-1" />
            </ElFormItem>
          </ElCol>
        </ElRow>
      </ElForm>
    </ElCard>
    <ElCard class="card-wrapper">
      <ElForm label-placement="right" :label-width="80">
        <ElFormItem :label="$t('page.operations.promotionProducts')">
          <ElUpload
            v-model:file-list="fileList"
            class="uploader"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            list-type="picture-card"
          >
            <ElIcon :size="40">
              <SvgIcon icon="material-symbols:add" />
            </ElIcon>
          </ElUpload>
        </ElFormItem>
      </ElForm>
    </ElCard>
    <ElCard class="sm:flex-1-hidden card-wrapper" body-class="ht50">
      <template #header>
        <TableHeaderOperation :loading="loading">
          <ElButton type="primary" @click="handleBatchImport">{{ $t('common.batchImport') }}</ElButton>

          <template #suffix>
            <ElSpace :size="24">
              <div class="flex-y-center">
                <div class="ml-40px mr-16px text-gray">数据时间</div>
                <ElDatePicker
                  v-model="model.times"
                  type="daterange"
                  :start-placeholder="$t('page.task.form.start')"
                  :end-placeholder="$t('page.task.form.end')"
                ></ElDatePicker>
              </div>

              <ElButton type="primary" @click="handleLoadingData">{{ $t('page.operations.loadingData') }}</ElButton>
              <ElButton type="primary" @click="handleDeleteKeywords">
                {{ $t('page.operations.deleteKeywords') }}
              </ElButton>
            </ElSpace>
          </template>
        </TableHeaderOperation>
      </template>
      <div class="h-[calc(100%-50px)]">
        <ElTable v-loading="loading" height="100%" border class="sm:h-full" :data="data" row-key="ShopId">
          <ElTableColumn v-for="col in columns" :key="col.prop" v-bind="col" />
        </ElTable>
      </div>
    </ElCard>

    <ConfirmModal
      v-model:visible="confirmVisible"
      title="提交成功"
      message="任务提交成功"
      left-text="去任务日志查看"
      right-text="完成设置"
    />

    <KeywordChangePriceModal v-model:visible="keywordChangePriceVisible" />
  </ElDrawer>
</template>

<style lang="scss" scoped>
.uploader {
  :deep(.el-upload--picture-card) {
    --el-upload-picture-card-size: 80px;
  }
}
</style>
